import React from 'react';
import { Form, Input, Button, Space, Select, Tooltip } from 'antd';
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import { adminCompanyType } from '@/utils/constant';

const Search = (props: any) => {
  const [form] = Form.useForm();
  const { callbackValue, loading } = props;
  const onReset = () => {
    form.resetFields();
  };
  const onFinish = (values: any) => {
    callbackValue(values);
  };
  return (
    <Form
      style={{ display: 'flex', flexWrap: 'wrap' }}
      form={form}
      name="control-hooks"
      onFinish={onFinish}
      initialValues={{ status: '在职' }}
    >
      <Form.Item name="company" style={{ marginBottom: 8, width: '180px' }}>
        <Select allowClear placeholder="请选择分公司">
          {adminCompanyType.map(item => (
            <Select.Option key={item.value} value={item.value}>
              {item.label}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>
      <span style={{ padding: 4 }}></span>
      <Form.Item name="name" style={{ margin: 0, width: '180px' }}>
        <Input style={{ width: 180 }} placeholder={'请输入员工姓名'} />
      </Form.Item>
      <span style={{ padding: 4 }}></span>
      <Form.Item name="jobs" style={{ margin: 0, width: '180px' }}>
        <Input style={{ width: 180 }} placeholder={'请输入工种'} />
      </Form.Item>
      <span style={{ padding: 4 }}></span>
      <Form.Item name="gender" style={{ margin: 0, width: '180px' }}>
        <Select placeholder={'请选择员工性别'}>
          <Select.Option value={'男'}>男</Select.Option>
          <Select.Option value={'女'}>女</Select.Option>
        </Select>
      </Form.Item>
      <span style={{ padding: 4 }}></span>
      <Form.Item style={{ margin: 0 }}>
        <Tooltip title="搜索">
          <Button
            disabled={loading}
            type="primary"
            htmlType="submit"
            icon={<SearchOutlined />}
          />
        </Tooltip>
      </Form.Item>
    </Form>
  );
};

export default Search;
